<!DOCTYPE html>
<html lang="en">
<html>

<head>
    <meta charset="utf-8">
    <title>收益分析</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="/resources/util.js"></script>
    <style type="text/css">
        body {
            overflow: hidden;
            display: flex;
            padding: 0px;
            margin: 0px;
        }

        #main {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 50px;
        }

        #unit {
            position: absolute;
            bottom: 0px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        #unit a {
            color: #003366;
            margin: 10px;
        }

    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <div id="unit">
        <a class="hour">24小时</a>
        <a class="day">日统计</a>
        <a class="month">月统计</a>
        <a class="year">年统计</a>
    </div>
    <script type="text/javascript">
        var apiHost = "https://"+window.location.hostname+"/plugin/api";
        let app_id = util._param("app_id");
        function initChart(data1, data2, date) {
            let main = document.getElementById('main');
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(main);
            let mainWidth = main.offsetWidth;
            var option = {
                tooltip: {
                    trigger: 'axis',

                    position: function(pt) {
                        return [pt[0], '10%'];
                    }
                },
                legend: {
                    data: ['支出', '收入']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [{
                    type: 'inside',
                    startValue:date.length-parseInt(mainWidth/75),
                    endValue: date.length-1,
                    zoomLock:true
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '100%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [{
                        name: '支出',
                        type: 'line',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        sampling: 'average',
                        itemStyle: {},
                        areaStyle: {},
                        data: data1
                    },
                    {
                        name: '收入',
                        type: 'line',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        sampling: 'average',
                        itemStyle: {},
                        areaStyle: {},
                        data: data2
                    }
                ]
            };
            myChart.setOption(option);
        }

        function loadData(time){
            
            $.get(apiHost+"/remote.call",{url:"https://service-p5l2zor3-1255950678.ap-shanghai.apigateway.myqcloud.com/release/analysis?time="+time+"&app_id="+app_id+"&plugin_id=zhuanpan"},function(res){
                var date = [];
                var data1 = [];
                var data2 = [];
                res.forEach(function(item){
                    date.push(item.time);
                    data1.push(Math.abs(item.expend/100).toFixed(2));
                    data2.push(Number(item.income/100).toFixed(2));
                });
                initChart(data1,data2,date);
            });
        }

        // 使用刚指定的配置项和数据显示图表。

        $(function() {
            $(".hour").click(function() {
                loadData("hour");
            });
            $(".day").click(function() {
                loadData("day");
            });
            $(".month").click(function() {
                loadData("month");
            });
            $(".year").click(function() {
                loadData("year");
            });
            loadData("hour");
        });

    </script>
</body>

</html>
